import { Button, Input, Spin } from 'antd';
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import PropTypes from 'prop-types'
import './index.scss'
import { LoadingOutlined, LockOutlined } from '@ant-design/icons';



export default function Inputs({icon,text,placeholder,onsubmit,onchange,loading,defaultvalue,disabled,type}) {
  const [value,setvalue]=useState('')
    const antIcon = (
      <LoadingOutlined
        style={{
          fontSize: 24,
        }}
        spin
      />
    );
    // 键盘按下事件
    function onKeyDown(e){    
      if(e.keyCode!==13) return
      onsubmit(value.trim())
      setvalue('')
    }

    Inputs.protoTypes={
      // text:PropTypes.isRequired,
      // onsubmit:PropTypes.func.isRequired
    }
    Inputs.defaultProps={  
      onchange:function a(){},//给onchange设置默认值，否则不传会报错
      loading:false,//不需要状态就设置为false，防止报错
    }
    useEffect(()=>{
      if(disabled){
        var input=document.querySelector('.search input')   //如果传了disabled就添加属性，不可更改
        input.setAttribute('disabled','disabled')
      }
    },[])

  return (
    <>
        <div className="search">
            <input type={type?type:'text'} className={['search__input',icon?'':'left',text?'':'rightbutton'].join(' ')} onKeyDown={e=>onKeyDown(e)} value={value?value:defaultvalue} onChange={e=>{onchange(e.target.value.trim());setvalue(e.target.value);}} placeholder={placeholder}/>
            <div className="search__icon">
              {icon}
            </div>
            {text?
            <button onClick={()=>{onsubmit(value.trim());setvalue('')}}><Spin spinning={loading} indicator={antIcon} size='small'/>{text}</button>
            :''
            }
        </div>


    </>
  )
}
